<template>
  <view class="home-page">
    <!-- 顶部搜索栏 -->
    <view class="header">
      <view class="header-inner">
        <view class="header-top">
          <view class="logo-area">
            <view class="logo-icon">
              <FaIcon name="leaf" color="#fff" :size="28" />
            </view>
            <view class="logo-text">
              <text class="logo-title">壹加壹农业</text>
              <text class="logo-subtitle">智慧农业 · 美好生活</text>
            </view>
          </view>
          <view class="message-btn" @click="handleMessages">
            <FaIcon name="bell" color="#1f2937" :size="36" />
            <view class="message-dot"></view>
          </view>
        </view>
        <view class="search-box" @click="handleSearch">
          <FaIcon name="search" color="#9ca3af" :size="28" style="margin-right: 12rpx;" />
          <text class="search-placeholder">搜索服务或需求...</text>
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="scroll-content">
      <!-- 轮播图 -->
      <view class="banner-section">
        <swiper 
          class="banner-swiper"
          :indicator-dots="false"
          :autoplay="true"
          :interval="5000"
          :circular="true"
          :duration="700"
          @change="handleSwiperChange"
        >
          <swiper-item v-for="(item, index) in banners" :key="index">
            <view class="banner-item" @click="handleBannerClick(item)">
              <image :src="item.image" mode="aspectFill" class="banner-image"></image>
              <view class="banner-mask"></view>
              <view class="banner-content">
                <text class="banner-title">{{ item.title }}</text>
                <text class="banner-desc">{{ item.desc }}</text>
                <view class="banner-btn" @click.stop="handleBannerAction(item)">
                  <text>{{ item.btnText }}</text>
                  <FaIcon name="arrow-right" color="#fff" :size="24" style="margin-left: 8rpx;" />
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
        
        <!-- 轮播指示器 -->
        <view class="banner-indicators">
          <view 
            v-for="(item, index) in banners" 
            :key="index"
            :class="['indicator-dot', {'active': currentBannerIndex === index}]"
          ></view>
        </view>
      </view>

      <!-- 服务中心 -->
      <view class="service-center">
        <view class="section-card">
          <view class="card-header">
            <text class="card-title">服务中心</text>
            <text class="card-more" @click="handleServiceCenterMore">全部服务</text>
          </view>
          <view class="service-grid">
            <view 
              v-for="(service, index) in serviceCenters" 
              :key="index"
              class="service-item"
              @click="handleServiceCenter(service)"
            >
              <view :class="['service-icon', service.colorClass]">
                <FaIcon :name="service.icon" :color="service.iconColor" :size="40" />
              </view>
              <text class="service-name">{{ service.name }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 快速发布卡片 -->
      <view class="quick-publish">
        <view class="publish-card">
          <view class="publish-header">
            <view class="publish-icon-wrap">
              <FaIcon name="plus" color="#10b981" :size="24" />
            </view>
            <text class="publish-title">快速发布</text>
          </view>
          <view class="publish-grid">
            <view class="publish-item" @click="handlePublishDemand">
              <view class="publish-item-icon gradient-secondary">
                <FaIcon name="list-alt" color="#fff" :size="36" />
              </view>
              <view class="publish-item-text">
                <text class="item-title">发布需求</text>
                <text class="item-desc">快速匹配服务</text>
              </view>
            </view>
            
            <view class="publish-item" @click="handlePublishService">
              <view class="publish-item-icon gradient-primary">
                <FaIcon name="handshake" color="#fff" :size="36" />
              </view>
              <view class="publish-item-text">
                <text class="item-title">发布服务</text>
                <text class="item-desc">展示服务能力</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 热门服务 -->
      <view class="hot-services">
        <view class="section-header">
          <view class="section-title-wrap">
            <view class="title-bar"></view>
            <text class="section-title">热门服务</text>
          </view>
          <text class="section-link" @click="handleMoreServices">查看更多 →</text>
        </view>
        <view class="service-list">
          <ServiceCard 
            v-for="service in hotServices" 
            :key="service.id" 
            :data="service" 
            @click="handleServiceClick"
            @contact="handleContactClick"
          />
        </view>
      </view>

      <!-- 热门需求 -->
      <view class="hot-demands">
        <view class="section-header">
          <view class="section-title-wrap">
            <view class="title-bar"></view>
            <text class="section-title">热门需求</text>
          </view>
          <text class="section-link" @click="handleMoreDemands">查看更多 →</text>
        </view>
        <view class="demand-list">
          <DemandCard 
            v-for="demand in hotDemands" 
            :key="demand.id" 
            :data="demand" 
            @click="handleDemandClick"
            @contact="handleContactClick"
          />
        </view>
      </view>

      <!-- 通知公告 -->
      <view class="announcements">
        <view class="section-header">
          <view class="section-title-wrap">
            <view class="title-bar"></view>
            <text class="section-title">通知公告</text>
          </view>
          <text class="section-link" @click="handleMoreAnnouncements">更多 →</text>
        </view>
        <view class="announcement-list">
          <view 
            v-for="(item, index) in announcements" 
            :key="index"
            class="announcement-item"
            @click="handleAnnouncementClick(item)"
          >
            <view class="announcement-content">
              <view :class="['announcement-dot', item.dotClass]"></view>
              <view class="announcement-info">
                <view class="announcement-top">
                  <text class="announcement-title">{{ item.title }}</text>
                  <text :class="['announcement-tag', item.tagClass]">{{ item.tag }}</text>
                </view>
                <text class="announcement-desc">{{ item.desc }}</text>
                <view class="announcement-meta">
                  <text class="meta-item">
                    <FaIcon name="calendar" :size="20" color="#6b7280" />
                    {{ item.time }}
                  </text>
                  <text class="meta-item">
                    <FaIcon name="eye" :size="20" color="#6b7280" />
                    {{ item.views }}
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部安全区 -->
      <view class="safe-bottom"></view>
    </scroll-view>
    
    <!-- 发布弹窗 -->
    <PublishModal :show="showPublishModal" @close="showPublishModal = false" />
    
    <!-- 底部导航栏 -->
    <TabBar :current="0" @publish="showPublishModal = true" />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import ServiceCard from '@/components/yjyny/ServiceCard.vue'
import DemandCard from '@/components/yjyny/DemandCard.vue'
import PublishModal from '@/components/yjyny/PublishModal.vue'
import TabBar from '@/components/yjyny/TabBar.vue'
import FaIcon from '@/components/common/FaIcon.vue'

// 发布弹窗
const showPublishModal = ref(false)

// 轮播图数据
const currentBannerIndex = ref(0)
const banners = ref([
  {
    image: '/static/images/banner/banner01.jpg',
    title: '壹加壹农业服务平台',
    desc: '嘉祥县壹加壹农业种植农民专业合作社',
    btnText: '了解平台',
    url: '/pages/yjyny/platform-intro/index'
  },
  {
    image: '/static/images/banner/banner02.jpg',
    title: '服务中心',
    desc: '全方位农业服务，一站式解决方案',
    btnText: '查看服务',
    url: '/pages/yjyny/service/center/index'
  }
])

// 服务中心数据（使用FontAwesome图标）
const serviceCenters = ref([
  { name: '办公场地', icon: 'building', colorClass: 'color-emerald', iconColor: '#10b981', url: '/pages/yjyny/service/center/detail?title=办公场地' },
  { name: '金融贷款', icon: 'yen-sign', colorClass: 'color-blue', iconColor: '#06b6d4', url: '/pages/yjyny/service/center/detail?title=金融贷款' },
  { name: '劳务派遣', icon: 'users', colorClass: 'color-purple', iconColor: '#8b5cf6', url: '/pages/yjyny/service/center/detail?title=劳务派遣' },
  { name: '物流代办', icon: 'truck', colorClass: 'color-orange', iconColor: '#f59e0b', url: '/pages/yjyny/service/center/detail?title=物流代办' },
  { name: '集采代购', icon: 'shopping-basket', colorClass: 'color-pink', iconColor: '#ec4899', url: '/pages/yjyny/service/center/detail?title=集采代购' },
  { name: '农产代销', icon: 'leaf', colorClass: 'color-green', iconColor: '#10b981', url: '/pages/yjyny/service/center/detail?title=农产代销' },
  { name: '农机服务', icon: 'cogs', colorClass: 'color-indigo', iconColor: '#6366f1', url: '/pages/yjyny/service/center/detail?title=农机服务' },
  { name: '更多', icon: 'th', colorClass: 'color-gray', iconColor: '#6b7280', url: '/pages/yjyny/service/center/index' }
])

// 热门服务
const hotServices = ref([
  {
    id: 1,
    image: 'https://images.unsplash.com/photo-1625246333195-78d9c38ad449?w=120&h=120&fit=crop',
    title: '专业农机服务 - 耕地播种一站式',
    desc: '提供专业农机服务，包括耕地、播种、收割等全流程服务，设备先进，经验丰富',
    tag: '农机服务',
    price: '200/亩起',
    views: '1.2k',
    user: '张**',
    phone: '138****5678',
    time: '2024-10-20T10:00:00Z'
  },
  {
    id: 2,
    image: 'https://images.unsplash.com/photo-1574943320219-553eb213f72d?w=120&h=120&fit=crop',
    title: '现代化办公场地出租',
    desc: '位于城市中心，交通便利，配套完善，适合各类农业企业办公使用',
    tag: '办公场地',
    price: '3000/月起',
    views: '856',
    user: '李**',
    phone: '159****8765',
    time: '2024-10-20T07:00:00Z'
  },
  {
    id: 3,
    image: 'https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?w=120&h=120&fit=crop',
    title: '农业金融贷款服务',
    desc: '专注农业领域的金融服务，利率优惠，审批快速，助力农业发展',
    tag: '金融贷款',
    price: '最高500万',
    views: '2.1k',
    user: '王**',
    phone: '186****2345',
    time: '2024-10-19T15:30:00Z'
  }
])

// 热门需求
const hotDemands = ref([
  {
    id: 1,
    title: '急需100亩有机蔬菜种植地',
    desc: '寻找适合有机蔬菜种植的土地，要求土壤肥沃，灌溉条件良好，交通便利',
    tag: '种植合作',
    location: '浙江杭州',
    budget: '20万',
    views: '328',
    user: '陈**',
    phone: '188****1234',
    time: '2024-10-20T10:00:00Z'
  },
  {
    id: 2,
    title: '寻找大型收割机服务',
    desc: '需要专业的收割机团队，约200亩水稻收割，要求设备先进，经验丰富',
    tag: '农机租赁',
    location: '江苏南京',
    budget: '5万',
    views: '456',
    user: '黄**',
    phone: '139****5678',
    time: '2024-10-20T07:00:00Z'
  }
])

// 通知公告
const announcements = ref([
  {
    id: 1,
    title: '2024年农业补贴政策发布',
    desc: '最新农业补贴政策已出台，符合条件的企业可申请...',
    tag: '政策',
    tagClass: 'tag-policy',
    dotClass: 'dot-primary',
    time: '今天 14:30',
    views: '1.2k'
  },
  {
    id: 2,
    title: '新用户注册福利活动',
    desc: '新用户注册即送服务优惠券，快来领取...',
    tag: '活动',
    tagClass: 'tag-activity',
    dotClass: 'dot-accent',
    time: '昨天 10:15',
    views: '856'
  }
])

// 事件处理
const handleSwiperChange = (e) => {
  currentBannerIndex.value = e.detail.current
}

const handleBannerClick = (item) => {
  uni.navigateTo({ url: item.url })
}

const handleBannerAction = (item) => {
  uni.navigateTo({ url: item.url })
}

const handleSearch = () => {
  uni.navigateTo({ url: '/pages/yjyny/search/index' })
}

const handleMessages = () => {
  uni.navigateTo({ url: '/pages/yjyny/messages/index' })
}

const handleServiceCenter = (service) => {
  uni.navigateTo({ url: service.url })
}

const handleServiceCenterMore = () => {
  uni.navigateTo({ url: '/pages/yjyny/service/center/index' })
}

const handlePublishDemand = () => {
  uni.navigateTo({ url: '/pages/yjyny/publish/demand' })
}

const handlePublishService = () => {
  uni.navigateTo({ url: '/pages/yjyny/publish/service' })
}

const handleServiceClick = (service) => {
  uni.navigateTo({ url: `/pages/yjyny/service/detail?id=${service.id}` })
}

const handleMoreServices = () => {
  uni.navigateTo({ url: '/pages/yjyny/service/list' })
}

const handleDemandClick = (demand) => {
  uni.navigateTo({ url: `/pages/yjyny/demand/detail?id=${demand.id}` })
}

const handleMoreDemands = () => {
  uni.navigateTo({ url: '/pages/yjyny/demand/list' })
}

const handleAnnouncementClick = (item) => {
  uni.navigateTo({ url: `/pages/yjyny/announcement/detail?id=${item.id}` })
}

const handleMoreAnnouncements = () => {
  uni.navigateTo({ url: '/pages/yjyny/announcement/list' })
}

const handleContactClick = (data) => {
  uni.showModal({
    title: '联系方式',
    content: `联系人：${data.user}\n电话：${data.phone}`,
    showCancel: true,
    cancelText: '取消',
    confirmText: '拨打电话',
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: data.phone.replace(/\*/g, '5')
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.home-page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f8fafc, #f1f5f9, #f9fafb);
}

// 头部搜索栏
.header {
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.header-inner {
  padding: 24rpx 32rpx;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex: 1;
}

.logo-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 24rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
  line-height: 1.2;
}

.logo-subtitle {
  font-size: 24rpx;
  color: #6b7280;
  line-height: 1.2;
}

.message-btn {
  position: relative;
  width: 80rpx;
  height: 80rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-dot {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  width: 16rpx;
  height: 16rpx;
  background-color: #ef4444;
  border-radius: 50%;
}

.search-box {
  display: flex;
  align-items: center;
  padding: 20rpx 32rpx;
  background-color: #f9fafb;
  border-radius: 24rpx;
  border: 2rpx solid rgba(229, 231, 235, 0.5);
}

.search-placeholder {
  font-size: 28rpx;
  color: #9ca3af;
}

// 滚动内容
.scroll-content {
  height: calc(100vh - 200rpx);
}

// 轮播图
.banner-section {
  padding: 32rpx;
  padding-top: 32rpx;
  padding-bottom: 16rpx;
  position: relative;
}

.banner-swiper {
  height: 352rpx;
  border-radius: 48rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}

.banner-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.banner-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
}

.banner-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 48rpx;
  color: #ffffff;
}

.banner-title {
  font-size: 40rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 16rpx;
}

.banner-desc {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  display: block;
  margin-bottom: 24rpx;
}

.banner-btn {
  display: inline-flex;
  align-items: center;
  padding: 16rpx 40rpx;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12rpx);
  border-radius: 24rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  font-size: 28rpx;
  font-weight: 500;
  color: #ffffff;
}

.banner-indicators {
  position: absolute;
  bottom: 32rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16rpx;
  z-index: 10;
}

.indicator-dot {
  width: 16rpx;
  height: 16rpx;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 8rpx;
  transition: all 0.3s;
  
  &.active {
    width: 40rpx;
    background-color: #ffffff;
  }
}

// 服务中心
.service-center {
  padding: 40rpx 32rpx;
}

.section-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32rpx;
}

.card-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1f2937;
}

.card-more {
  font-size: 24rpx;
  color: #6b7280;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rpx;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-icon {
  width: 112rpx;
  height: 112rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  transition: transform 0.3s;
  
  &.color-emerald { background: linear-gradient(to bottom right, #d1fae5, #a7f3d0); }
  &.color-blue { background: linear-gradient(to bottom right, #dbeafe, #bfdbfe); }
  &.color-purple { background: linear-gradient(to bottom right, #f3e8ff, #e9d5ff); }
  &.color-orange { background: linear-gradient(to bottom right, #ffedd5, #fed7aa); }
  &.color-pink { background: linear-gradient(to bottom right, #fce7f3, #fbcfe8); }
  &.color-green { background: linear-gradient(to bottom right, #d1fae5, #a7f3d0); }
  &.color-indigo { background: linear-gradient(to bottom right, #e0e7ff, #c7d2fe); }
  &.color-gray { background: linear-gradient(to bottom right, #f9fafb, #f3f4f6); }
}

.service-item:active .service-icon {
  transform: scale(1.1);
}

.service-name {
  font-size: 24rpx;
  color: #6b7280;
  text-align: center;
}

// 快速发布
.quick-publish {
  padding: 0 32rpx 40rpx;
}

.publish-card {
  padding: 32rpx;
  border-radius: 32rpx;
  background: linear-gradient(to bottom right, rgba(16, 185, 129, 0.05), rgba(6, 182, 212, 0.05));
  border: 2rpx solid rgba(16, 185, 129, 0.2);
}

.publish-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.publish-icon-wrap {
  width: 48rpx;
  height: 48rpx;
  border-radius: 16rpx;
  background-color: rgba(16, 185, 129, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.publish-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1f2937;
}

.publish-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.publish-item {
  background-color: #ffffff;
  padding: 32rpx;
  border-radius: 24rpx;
  border: 2rpx solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.publish-item-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.publish-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1f2937;
}

.item-desc {
  font-size: 24rpx;
  color: #6b7280;
  margin-top: 8rpx;
}

// 公共样式 - 热门服务、热门需求、通知公告
.hot-services,
.hot-demands,
.announcements {
  padding: 0 32rpx 40rpx;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.section-title-wrap {
  display: flex;
  align-items: center;
}

.title-bar {
  width: 8rpx;
  height: 32rpx;
  background-color: #10b981;
  border-radius: 4rpx;
  margin-right: 16rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
}

.section-link {
  font-size: 24rpx;
  color: #10b981;
}

// 服务列表和需求列表
.service-list,
.demand-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

// 通知公告列表
.announcement-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.announcement-item {
  background-color: #ffffff;
  border-radius: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
  overflow: hidden;
}

.announcement-content {
  padding: 32rpx;
  display: flex;
  gap: 24rpx;
}

.announcement-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-top: 12rpx;
  flex-shrink: 0;
  
  &.dot-primary { background-color: #10b981; }
  &.dot-accent { background-color: #f59e0b; }
}

.announcement-info {
  flex: 1;
  min-width: 0;
}

.announcement-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.announcement-title {
  flex: 1;
  font-size: 28rpx;
  font-weight: bold;
  color: #1f2937;
  padding-right: 16rpx;
}

.announcement-tag {
  font-size: 22rpx;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  flex-shrink: 0;
  
  &.tag-policy {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
  }
  
  &.tag-activity {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
  }
}

.announcement-desc {
  font-size: 24rpx;
  color: #6b7280;
  margin-bottom: 16rpx;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.announcement-meta {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.meta-item {
  font-size: 24rpx;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8rpx;
}

// 底部安全区
.safe-bottom {
  height: 160rpx;
}
</style>
